<template>
	<view>

		<image class="banner-logo" :src="imgUrl+'/denglyu.png'" mode=""></image>
		<view class="logon-box">
			<view class="title">登录/注册</view>
			
			<!-- 微信授权登录按钮 -->
			<view class="wechat-login-btn" @click="handleWechatLogin">
				<image class="wechat-icon" :src="imgUrl+'/wechat-icon.png'" mode=""></image>
				<text>授权登录</text>
			</view>
			
			<!-- 或者分割线 -->
			<view class="divider-section">
				<view class="divider-line"></view>
				<text class="divider-text">或</text>
				<view class="divider-line"></view>
			</view>
			
			<view v-if="tabINdex==1">
				<view class="flex-line-height inputCos">
					<image class="left-icon" :src="imgUrl+'/iconLGin.png'" mode=""></image>
					<input type="text" style="width: 400rpx;" v-model="account" placeholder="请输入登录账号">
				</view>
				<view class="flex-line-height flex-height-between inputCos">
					<view class="flex-line-height">
						<image class="left-icon" :src="imgUrl+'/iconLYus.png'" mode=""></image>
						<input style="width: 400rpx;" v-if="!ispwd" type="password"  v-model="pwd" placeholder="请再次确认登录密码">
						<input style="width: 400rpx;" v-else type="text"  v-model="pwd" placeholder="请再次确认登录密码">
					</view>
					<view @click="ispwd=!ispwd">
						<image v-if="!ispwd" class="left-icon" :src="imgUrl+'/mima.png'" mode=""></image>
						<image v-else class="left-icon" :src="imgUrl+'/mima2.png'" mode=""></image>
					</view>
				</view>
			</view>
			
			<view v-if="tabINdex==2">
				<view class="flex-line-height inputCos">
					<image class="left-icon" :src="imgUrl+'/iconLGin.png'" mode=""></image>
					<input type="text" style="width: 400rpx;" v-model="phone" placeholder="请输入登录手机号">
				</view>
				<view class="flex-line-height flex-height-between inputCos">
					<view class="flex-line-height flex-height-between">
						<view class="flex-line-height">
							<image class="left-icon" :src="imgUrl+'/iconLYus.png'" mode=""></image>
							<input style="width: 400rpx;" type="number"  v-model="code" placeholder="请输入验证码">
						</view>
					</view>
					<view class="huoquanyanzheng" @click="yanzhengma">
						 {{countdown>0?countdown+'s':'获取验证码'}}
					</view>
				</view>
			</view>
			<view class="flex-height-between wangjimiam">
				<text></text>
				<!-- <text>忘记密码?</text> -->
			</view>
			<view class="tijiao" @click="logon">
				登录/注册
			</view>
			
			<view class="xiyi active flex-line-height flex-content">
			    <view class="conterArr">
					<checkbox-group @change="checkboxChange">
						<label>
							<checkbox value="cb" style="transform:scale(0.6)" />
						</label>
					</checkbox-group>
				</view>	我已阅读并同意 <text class="t" @click="goPages('/logon/logon/xieyi')">《隐私政策》</text><text class="t" @click="goPages('/logon/logon/zhengce')">《服务协议》</text>
			</view>
			
		</view>
		
		<!-- 获取微信手机号弹框 -->
		<view v-if="showPhoneModal" class="phone-modal-overlay">
			<view class="phone-modal">
				<view class="modal-header">
					<text class="modal-title">完善信息</text>
					<text class="modal-close" @click="skipPhoneNumber">×</text>
				</view>
				<view class="modal-content">
					<view class="modal-icon">
						<image :src="imgUrl+'/phone-icon.png'" mode="aspectFit"></image>
					</view>
					<text class="modal-desc">为了提供更好的服务，请授权获取您的手机号</text>
				</view>
				<view class="modal-footer">
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn-cancel" @click="skipPhoneNumber">跳过</button>
					<button class="btn-confirm" open-type="getPhoneNumber" @getphonenumber="getWechatPhoneNumber">
						授权手机号
					</button>
					<!-- #endif -->
					
					<!-- #ifndef MP-WEIXIN -->
					<button class="btn-cancel" @click="skipPhoneNumber">跳过</button>
					<button class="btn-confirm" @click="skipPhoneNumber">确定</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Request
	} from '@/utils/request.js'
	export default{
		data(){
			return {
				tabINdex:2,
				account:"",
				phone:'',
				in_conf:{},
				code:"",
				imgUrl:this.imgUrl,
				pwd:'',
				ispwd:false,
				countdown:0,
				pwd_pwd:"",
				ispwd_pwd:false,
				cochecked:false,
				isWXInstalled: false,
				platform: '',
				showPhoneModal: false, // 控制获取手机号弹框显示
				wechatUserInfo: null, // 存储微信用户信息
			}
		},
		onLoad() {
			this.indexconf();
			
			// 检查平台
			// #ifdef APP-PLUS
			this.platform = uni.getSystemInfoSync().platform;
			// 检查微信是否安装
			plus.oauth.getServices((services) => {
				services.forEach((service) => {
					if (service.id === 'weixin') {
						this.isWXInstalled = true;
					}
				});
			});
			// #endif
		},
		methods:{
			checkboxChange(e){
				this.cochecked =! this.cochecked;
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			indexconf(){
				Request('index_conf',{
				}).then((res) => {
					//console.log(res)
					this.in_conf=res;
					// this.jobConList = this.jobConList.concat(tdata);
				})
			},
			startCountdown() {
				this.countdown=60;
			    var counter = setInterval(()=>{
					this.countdown=this.countdown-1;
					console.log(this.countdown)
			        if (this.countdown >= 0) {
			            // document.getElementById("countdown").innerHTML = countdown + " seconds remaining";
			        } else {
			            clearInterval(counter);
			        }
			    }, 1000);
			},
			yanzhengma(){
				Request('send_sms',{
					phone:this.phone
				},'post').then(res => {
					this.startCountdown()
				})
			},
			logon(){
				if(!this.cochecked){
					uni.showToast({
						title: '请同意勾选协议',
						icon:'none'
					})
					return false;
				}
				if(this.tabINdex==2){
					let formData={code:this.code,phone:this.phone};
					Request('phone_check',formData,'post').then(res => {
						uni.showToast({
							title:res.msg || '成功',
							icon:'none'
						})
						uni.setStorageSync('token',res.token)
						uni.setStorageSync('userinfo',JSON.stringify(res.userinfo))
						setTimeout(()=>{
							uni.reLaunch({
							  url: "/pages/index/index",
							});
							// this.goPages('/pages/index/index');
						},1000)
					})
					return false;
				}
				let formData={account:this.account,phone:this.phone,pwd:this.pwd};
				Request('login',formData,'post').then(res => {
					uni.showToast({
						title:res.msg || '成功',
						icon:'none'
					})
					uni.setStorageSync('token',res.token)
					setTimeout(()=>{
						this.goPages('/pages/index/index');
					},1000)
				})
			},
			// 新的微信授权登录处理方法
			handleWechatLogin() {
				if(!this.cochecked){
					uni.showToast({
						title: '请同意勾选协议',
						icon:'none'
					})
					return false;
				}
				
				// #ifdef MP-WEIXIN
				// 小程序环境
				this.wechatMiniProgramLogin();
				// #endif
				
				// #ifdef APP-PLUS
				// APP环境
				this.wechatAppLogin();
				// #endif
				
				// #ifdef H5
				// H5环境
				this.wechatH5Login();
				// #endif
			},
			
			// 微信小程序登录
			wechatMiniProgramLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 发送code到服务端验证
						Request('wechatLogin', {
							code: loginRes.code,
							type: 'miniprogram'
						}, 'post').then(res => {
							if (res.token) {
								this.wechatUserInfo = res.userinfo;
								uni.setStorageSync('token', res.token);
								// 显示获取手机号弹框
								this.showPhoneModal = true;
							} else {
								uni.showToast({
									title: res.msg || '登录失败',
									icon: 'none'
								});
							}
						}).catch(err => {
							uni.showToast({
								title: '登录失败，请重试',
								icon: 'none'
							});
						});
					},
					fail: (err) => {
						console.error('微信登录失败：', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 微信APP登录
			wechatAppLogin() {
				if (!this.isWXInstalled) {
					uni.showToast({
						title: '请先安装微信',
						icon: 'none'
					});
					return;
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						Request('wechatLogin', {
							code: loginRes.code,
							type: 'app'
						}, 'post').then(res => {
							if (res.token) {
								this.wechatUserInfo = res.userinfo;
								uni.setStorageSync('token', res.token);
								// 显示获取手机号弹框
								this.showPhoneModal = true;
							} else {
								uni.showToast({
									title: res.msg || '登录失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error('微信登录失败：', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 微信H5登录
			wechatH5Login() {
				// H5环境下的微信授权登录
				uni.showToast({
					title: 'H5环境暂不支持微信登录',
					icon: 'none'
				});
			},
			
			// 获取微信手机号
			getWechatPhoneNumber(e) {
				console.log('获取手机号回调：', e);
				
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					// 发送加密数据到服务端解密
					Request('getWechatPhone', {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: this.wechatUserInfo.session_key
					}, 'post').then(res => {
						if (res.phone) {
							// 更新用户手机号
							uni.setStorageSync('userinfo', JSON.stringify({
								...this.wechatUserInfo,
								phone: res.phone
							}));
							
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index",
								});
							}, 1000);
						} else {
							uni.showToast({
								title: '获取手机号失败',
								icon: 'none'
							});
						}
						this.showPhoneModal = false;
					});
				} else {
					// 用户拒绝授权或出错，跳过手机号获取
					this.skipPhoneNumber();
				}
			},
			
			// 跳过手机号获取
			skipPhoneNumber() {
				uni.setStorageSync('userinfo', JSON.stringify(this.wechatUserInfo));
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/index/index",
					});
				}, 1000);
				
				this.showPhoneModal = false;
			},
			
			wechatLogin() {
				// #ifdef APP-PLUS
				if (!this.isWXInstalled) {
					uni.showToast({
						title: '请先安装微信',
						icon: 'none'
					});
					return;
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取到code后，发送给服务端
						Request('user/wechatLogin', {
							code: loginRes.code
						}, 'post').then(res => {
							if (res.code === 200) {
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('userInfo', res.data.userInfo);
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						});
					},
					fail: (err) => {
						console.error('微信登录失败：', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			appleLogin(){
				// #ifdef APP-PLUS
				if (this.platform !== 'ios') {
					uni.showToast({
						title: '仅支持iOS设备',
						icon: 'none'
					});
					return;
				}
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						// 获取到identityToken后，发送给服务端
						Request('user/appleLogin', {
							identityToken: loginRes.identityToken
						}, 'post').then(res => {
							if (res.code === 200) {
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('userInfo', res.data.userInfo);
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						});
					},
					fail: (err) => {
						console.error('Apple登录失败：', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					}
				});
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.banner-logo{
		height: 502rpx;
		width: 100%;
		position: relative;
	}
	.logon-box{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		z-index: 1;
		padding:40rpx;
	}
	.huoquanyanzheng{
		    font-size: 13px;
		    color: #3B5EEC;
	}
	.tab-list{
		margin: 0 20rpx;
		padding-top: 10rpx;
		font-size: 32rpx;
	}
	.logon-box{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 9;
		padding:40rpx;
	}
	.actibe{
		color: #3B5EEC;
	}
	.logon-box .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.flex-conter {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8F9294;
		font-style: normal;
		margin-top: 12rpx;
		text-transform: none;
		margin-bottom: 12rpx;
	}
	.flex-conter .tents{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #3B5EEC;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.inputCos{
		padding-top: 48rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #E1E4E8;
	}
	.logon-box .left-icon{
		width: 36rpx;
		margin-right: 14rpx;
		height: 36rpx;
	}
	.wangjimiam{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: right;
		margin-top: 20rpx;
		font-style: normal;
		text-transform: none;
	}
	.tijiao{
		width: 654rpx;
		height: 88rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		margin: 0 auto;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		margin-top: 48rpx;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.xiyi{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		margin-top: 24rpx;
		color: #8F9294;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.xiyi .t{
		color: #3B5EEC;
	}
	.conterArr{
		width: 32rpx;
		height: 45rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		border: 1rpx solid #C1C4C7;
	}
	.active .conterArr{
		border: none;
	}
	.conterArr .c{
		display: none;
	}
	.active .conterArr .c{
		display: block;
	}
	.third-party-login {
	  margin-top: 30rpx;
	  .divider {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 20rpx;
	    .line {
	      flex: 1;
	      height: 1px;
	      background-color: #E1E4E8;
	    }
	    .text {
	      margin: 0 20rpx;
	      color: #8F9294;
	      font-size: 24rpx;
	    }
	  }
	  .login-buttons {
	    display: flex;
	    justify-content: center;
	    gap: 40rpx;
	    .login-btn {
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      image {
	        width: 60rpx;
	        height: 60rpx;
	        margin-bottom: 10rpx;
	      }
	      text {
	        font-size: 24rpx;
	        color: #646669;
	      }
	    }
	  }
	}
	
	/* 微信登录按钮样式 */
	.wechat-login-btn {
		width: 654rpx;
		height: 88rpx;
		background: #07C160;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto 0;
		
		.wechat-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
		
		text {
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
	
	/* 分割线样式 */
	.divider-section {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		
		.divider-line {
			flex: 1;
			height: 1px;
			background-color: #E1E4E8;
		}
		
		.divider-text {
			margin: 0 20rpx;
			color: #8F9294;
			font-size: 24rpx;
		}
	}
	
	/* 手机号弹框样式 */
	.phone-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		
		.phone-modal {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			
			.modal-header {
				padding: 40rpx 40rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}
				
				.modal-close {
					font-size: 40rpx;
					color: #999999;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.modal-content {
				padding: 20rpx 40rpx 40rpx;
				text-align: center;
				
				.modal-icon {
					margin-bottom: 20rpx;
					
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
				
				.modal-desc {
					font-size: 28rpx;
					color: #666666;
					line-height: 1.5;
				}
			}
			
			.modal-footer {
				padding: 0 40rpx 40rpx;
				display: flex;
				gap: 20rpx;
				
				button {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					border: none;
					
					&.btn-cancel {
						background: #F5F5F5;
						color: #666666;
					}
					
					&.btn-confirm {
						background: #07C160;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>